import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'

import CommentCell from '../comment-cell'

import './index.less'

type ICommentState = {
  tabBarIndex: number
}

export default class Comment extends Component<{}, ICommentState> {

  constructor () {
    super()
    this.state = {
      tabBarIndex: 0
    }
  }

  render () {

    const { tabBarIndex } = this.state

    return (
      <View className='container'>
        <View className='header border-bottom_1px'>
          <View className='item'>
            <View className='title'>商品描述</View>
            <View className='sub-title'>4.2</View>
          </View>
          <View className='item'>
            <View className='title'>服务评价</View>
            <View className='sub-title'>4.4</View>
          </View>
          <View className='item'>
            <View className='title'>物流评价</View>
            <View className='sub-title'>4.5</View>
          </View>
        </View>
        <View className='menu-content border-bottom_1px'>
          <View className={`item ${tabBarIndex == 0 ? 'item-sel' : ''}`} onClick={this.switchMenuBar.bind(this, 0)} >
            全部(20)
          </View>
          <View className={`item ${tabBarIndex == 1 ? 'item-sel' : ''}`} onClick={this.switchMenuBar.bind(this, 1)}>
            有图(12)
          </View>
        </View>
        <View className='cell-list'>
          {
            [1,2,3,4,5,6].map((_, index) => {
              return <View className='cell-item' key={index}>
                <CommentCell showLine={index != 5}/>
              </View>
            })
          }
        </View>
      </View>
    )
  }

  switchMenuBar = (index: number) => {
    this.setState({
      tabBarIndex: index
    })
  }
}
